<template>
  <div id="app">
    <!-- 导航栏 -->
    <van-nav-bar
      title="文章详情"
      left-arrow
      class="nav"
      @click-left="$router.back()"
    ></van-nav-bar>
    <!-- 文章详情区域 -->
    <div class="article">
      <h3>{{ information.title }}</h3>
      <div class="author_info">
        <van-image
          fit="cover"
          round
          width="60px"
          height="60px"
          :src="information.aut_photo"
        ></van-image>
        <div class="info">
          <div>{{ information.aut_name }}</div>
          <div style="color:#bbb;">
            {{ information.pubdate | relativeTime }}
          </div>
        </div>
        <van-button
          v-if="!information.is_followed"
          type="info"
          round
          @click="follow(true)"
          >+ 关注</van-button
        >
        <van-button v-else type="danger" round @click="follow(false)"
          >取消关注</van-button
        >
      </div>
      <!-- 文章内容 -->
      <div class="content" v-html="information.content" ref="html"></div>
      <!-- 分割线 -->
      <van-divider>end</van-divider>
      <!-- 功能区域 -->
      <div class="btn-wrap">
        <!-- 点赞 -->
        <van-button
          v-if="information.attitude == -1"
          type="primary"
          plain
          round
          icon="good-job-o"
          @click="live(true)"
          >点赞</van-button
        >
        <!-- 取消点赞 -->
        <van-button
          v-else-if="information.attitude == 1"
          type="primary"
          plain
          round
          icon="good-job"
          @click="live(false)"
          >取消</van-button
        >
        <div v-show="information.attitude == -1" style="width:20px;"></div>
        <!-- 不喜欢 -->
        <van-button
          v-if="information.attitude == -1"
          type="danger"
          plain
          round
          icon="delete-o"
          @click="like(true)"
          >不喜欢</van-button
        >
        <!-- 喜欢 -->
        <van-button
          v-else-if="information.attitude == 0"
          type="danger"
          plain
          round
          icon="delete"
          @click="like(false)"
          >喜欢</van-button
        >
      </div>
    </div>
    <!-- 评论内容 -->
    <Comment></Comment>
    <div style="width: 100%; height:48px;"></div>
  </div>
</template>

<script>
import {
  articleInfoAPI,
  artLikingAPI,
  artLiking2API,
  artLiveAPI,
  artLive2API,
  attentionsAPI,
  followingsAPI
} from '@/api/index.js'

// 导入highlight插件
import highlight from 'highlight.js'
// highlight.highlightAll() 这个方法会找到页面上所有的pre(代表一段) code(代表一行)标签加入样式，使用前要先导入css
// highlight.highlightElement(dom)
import 'highlight.js/styles/vs2015.css'

import Comment from './comment.vue'

export default {
  components: {
    Comment
  },
  data () {
    return {
      information: ''
    }
  },
  async created () {
    let res = await articleInfoAPI(this.$route.query.id)
    // console.log(res);
    this.information = res.data.data

    // 等数据渲染完成后调用highlight的方法,让数据内的pre高亮
    this.$nextTick(() => {
      const _html = this.$refs.html.querySelectorAll('pre')
      _html.forEach(item => {
        highlight.highlightElement(item)
      })
    })

    // this.$store.dispatch('reqUserInfo')
  },
  methods: {
    // 通过传递的布尔值进行不同的操作
    async live (status) {
      if (status) {
        await artLikingAPI({ target: this.$route.query.id })
        this.information.attitude = 1
      } else {
        await artLiking2API(this.$route.query.id)
        this.information.attitude = -1
      }
    },
    async like (status) {
      if (status) {
        await artLiveAPI({ target: this.$route.query.id })
        this.information.attitude = 0
      } else {
        await artLive2API(this.$route.query.id)
        this.information.attitude = -1
      }
    },
    async follow (status) {
      // 把要修改的状态赋值给数据
      this.information.is_followed = status
      if (status) {
        // status为true时代表要关注
        let res = await attentionsAPI({
          target: this.information.aut_id
        })
        // console.log(res);
      } else {
        // status为false时代表取消关注
        let res = await followingsAPI(this.information.aut_id)
        // console.log(res);
      }
    }
  }
  // computed: {
  //   // 相当于给state里的userInfo起了别名叫info
  //   info () {
  //     return this.$store.state.userInfo
  //   }
  // }
}
</script>

<style scoped lang="less">
.nav {
  position: fixed;
  width: 100%;
  left: 0;
  font-size: 16px;
  z-index: 999;
  top: 0;
}
.article {
  padding: 0 16.5px;
  margin: 46px 0 0;
  border: 1px solid #fff;
  box-sizing: border-box;
  width: 100%;
  ::v-deep h3 {
    font-size: 24px;
    margin: 8.5px 0;
  }
  .author_info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .info {
    margin-left: 16.5px;
    flex: 1px;
  }
  ::v-deep .content {
    word-wrap: break-word; // 当数据中的最后一个单词在一行内放不下时，自动换行
    // white-space: pre; // 可以让数据保持原样，保留空格和空白区域等
    overflow: hidden;
    img {
      // 给文章详情内可能携带的图片设置宽度
      width: 80%;
    }
  }
}
.btn-wrap {
  display: flex;
  justify-content: center;
  .van-button {
    width: 110px;
  }
}
</style>
